<template>
	<view class="box">
		<!-- 切换改变选项 -->
		<view class="switch flex">
			<view class="title " :class="{ active: switchId == ix }" v-for="(im, ix) in switchList" :key="ix" @click="switchs(ix)">
				{{ im.title }}
				<view class="line" v-show="switchId == ix"></view>
			</view>
		</view>
		<!-- 推荐 -->
		<scroll-view    class="scroll-view_H recommend flex flex--wrap justify-between" scroll-y enable-flex refresher-enabled :refresher-triggered='sxStart' @refresherrefresh="xlsx">
				<videoList  :videoList='im' v-show="switchId==0" v-for="(im,ix) in videoList" :key='ix'></videoList>
				<videoList  :videoList='im' v-show="switchId==1" v-for="(im,ix) in mvList" :key='ix'></videoList>
		</scroll-view>
	</view>
</template>

<script>
	import api from'../../utils/http/api.js'
export default {
	data() {
		return {
			switchList: [{ id: 0, title: '推荐' }, { id: 1, title: 'MV' }],
			switchId: 0 ,//默认选中id
			videoList:[],//推荐视频列表
			mvList:[] ,//mv列表
			sxStart:false,//下拉刷新状态
		};
	},
	onLoad() {
		this.getVideo() //获取视频接口  现场: 58100  mv:1000
	},
	methods: {
		switchs(id) {
			this.switchId = id;
		},
		// 跳转视频详情
		jump_detail(){
			uni.navigateTo({
				url:'../videoDetail/videoDetail'
			})
		},
		// 视频接口
		async getVideo(){
			// 推荐
			const resRom = await api('/video/group',{id:58100})
			// mv
			const resMv = await api('/video/group',{id:1000})
			this.videoList = resRom.datas
			this.mvList = resMv.datas
		},
		// 下拉刷新
		async xlsx(){
			// 推荐
			console.log('下拉')
			this.sxStart = true
			const resRom = await api('/video/group',{id:58100})
			this.videoList = resRom.datas
			this.sxStart = false
			
		}
	}
};
</script>

<style lang="less" scoped>
.box {
	.switch {
		width: 100%;
		background-color: #FFFFFF;
		padding-bottom: 30rpx;
		.title {
			padding-left: 30rpx;
			line-height: 80rpx;
			margin-right: 20rpx;
			position: relative;
		}
	}
	// 视频列表
	.recommend {
		height: 100vh;
		padding: 0 30rpx 10rpx 30rpx;
		box-sizing: border-box;
	}
}
.line {
	height: 10rpx;
	width: 100%;
	margin-top: -27rpx;
	background-color: #31c27c;
	border-radius: 20rpx;
}
.active {
	// font-size: 40rpx;
	transform: scale(1.3);
	display: table-cell;
	vertical-align: bottom;
	// animation: my-btn 1s ease-in ;
	// font-size: 40rpx;
}
@keyframes my-btn {
	0% {
		transform: translateX(0rpx);
		transform: scale(0.5);
	}
	50% {
		transform: translateX(20rpx);
		transform: scale(0.7);
	}
	100% {
		transform: translateX(0rpx);
		transform: scale(1);
	}
}
</style>
